<template>
  <div class="search">
    <div class="search-box-wrapper">
      <search-box @Search="searchKey" @query="onQueryChange" ref="SearchBox"></search-box>
    </div>
    <div class="shortcut-wrapper" ref="shortcutWrapper" v-show="!query">
      <Scroll class="shortcut" ref="shortcut" :delayTime="delayTime">
        <div :data="Showshortcut">
          <div class="hot-key">
            <h1 class="title">热门搜索</h1>
            <ul>
              <li
                class="item"
                v-for="(hot,index) in hotkey"
                :key="index"
                @click.stop="searchHotKey(hot)"
              >
                <span>{{hot.k}}</span>
              </li>
            </ul>
          </div>
          <div class="search-history" v-show="history.length">
            <h1 class="title">
              <span class="text">搜索历史</span>
              <span class="clear" @click.stop="showConfirm">
                <i class="iconfont icon-clear2"></i>
              </span>
            </h1>
            <searchlist :searches="history" @select="searchToInpput" @delete="delete_historyOne"></searchlist>
          </div>
        </div>
      </Scroll>
    </div>
    <div class="search-result" ref="searchResult" v-show="query">
      <suggest :query="query" @listScroll="blurInput" @selectSearch="saveSearch" ref="Suggest"></suggest>
    </div>
    <Confirm ref="Confirm" text="是否清空所有的历史记录？" confirmBtnText="清空" @confirm="removeAll"></Confirm>
    <router-view></router-view>
  </div>
</template>
<script>
import searchBox from "../../components/searchbox/searchbox";
import { getSearchHotKey } from "../../api/search";
import { ERR_OK } from "@/api/config";
import suggest from "@/components/suggest/suggest";
import { mapActions, mapGetters } from "vuex";
import searchlist from "@/base/search-list/search-list";
import Confirm from "@/base/confirm/confirm";
import Scroll from "@/base/scroll/scroll";
import { playlistMixin, searchMixin } from "@/common/js/mixin";
export default {
  mixins: [playlistMixin, searchMixin],
  data() {
    return {
      hotkey: [], //热门搜索
      // query: "", //搜索的关键词
      history: [],
      delayTime: 100 //scroll的重新计算时间
    };
  },
  components: {
    searchBox,
    suggest,
    searchlist,
    Confirm,
    Scroll
  },
  computed: {
    // ...mapGetters(["searchHistory"]),
    Showshortcut() {
      return this.hotkey.concat(this.searchHistory);
    }
  },
  created() {
    this._initSearchHotKey();
    this.history = this.searchHistory;
  },
  methods: {
    // mixin
    handlePlaylist(playlist) {
      const bottom = playlist.length > 0 ? "60px" : "";
      // 调用子组件的方法
      if (this.query) {
        this.$refs.searchResult.style.bottom = bottom;
        this.$refs.Suggest.refresh();
      } else {
        this.$refs.shortcutWrapper.style.bottom = bottom;
        this.$refs.shortcut.refresh();
      }
    },
    //接收传输过来的值
    searchKey(keyCode) {
      console.log(keyCode);
    },
    // 获取热门搜索的关键词
    _initSearchHotKey() {
      getSearchHotKey().then(res => {
        if (res.code === ERR_OK) {
          this.hotkey = res.data.hotkey.slice(0, 10);
        }
      });
    },
    //点击热门搜索的关键词会填写到搜索框里面
    searchHotKey(hot) {
      //在父组件中调用子组件的方法，设置query的值
      this.$refs.SearchBox.setQuery(hot.k);
    },
    // //当query发生变化时触发
    // onQueryChange(query) {
    //   this.query = query;
    // },
    // blurInput() {
    //   this.$refs.SearchBox.blur();
    // },
    // 保存搜索的结果
    // saveSearch() {
    //   console.log("保存")
    //   this.saveSearchHistory(this.query);
    // },
    // searchToInpput(e) {
    //   //在父组件中调用子组件的方法，设置query的值
    //   this.$refs.SearchBox.setQuery(e);
    // },
    // //删除历史记录中的某一项
    // delete_historyOne(e) {
    //   // console.log(e)
    //   this.removeSearchHistory(e);
    // },
    // 删除所有的历史记录
    removeAll() {
      this.removeAllHistory();
    },
    // 展示弹窗
    showConfirm() {
      this.$refs.Confirm.show();
    },
    ...mapActions([
      // "removeSearchHistory",
      // "saveSearchHistory",
      "removeAllHistory"
    ])
  },
  watch: {
    query(newVal) {
      if (!newVal) {
        setTimeout(() => {
          this.$refs.shortcut.refresh();
        }, 20);
      }
    },
    searchHistory() {
      //监听
      this.history = this.searchHistory;
    }
  }
};
</script>
<style lang="stylus"  rel="stylesheet/stylus">
@import '../../common/stylus/variable.styl';
@import '../../common/stylus/mixin';

.search {
  position: fixed;
  width: 100%;
  height: 100%;
  background: $color-background;

  .search-box-wrapper {
    margin: 20px;
  }

  .shortcut-wrapper {
    position: fixed;
    top: 178px;
    bottom: 0;
    width: 100%;
    overflow: hidden;

    .shortcut {
      height: 100%;
      overflow: hidden;

      .hot-key {
        margin: 0 20px 20px 20px;

        .title {
          margin-bottom: 20px;
          font-size: $font-size-medium;
          color: $color-text-l;
        }

        .item {
          display: inline-block;
          padding: 5px 10px;
          margin: 0 20px 10px 0;
          border-radius: 6px;
          background: $color-highlight-background;
          font-size: $font-size-medium;
          color: $color-text-d;
        }
      }

      .search-history {
        position: relative;
        margin: 0 20px;

        .title {
          display: flex;
          align-items: center;
          height: 40px;
          font-size: $font-size-medium;
          color: $color-text-l;

          .text {
            flex: 1;
          }

          .clear {
            extend-click();

            .icon-clear {
              font-size: $font-size-medium;
              color: $color-text-d;
            }
          }
        }
      }
    }
  }

  .search-result {
    position: fixed;
    width: 100%;
    top: 178px;
    bottom: 0;
  }
}
</style>
